<template>
    <div class="settings-page">
        <el-card class="settings-section" shadow="hover">
            <h3>账户设置</h3>
            <el-form :model="accountSettings" ref="accountForm" label-width="120px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="accountSettings.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="accountSettings.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="accountSettings.password" placeholder="请输入新密码" />
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="settings-section" shadow="hover">
            <h3>通知设置</h3>
            <el-form :model="notificationSettings" label-width="120px">
                <el-form-item label="邮件通知">
                    <el-switch v-model="notificationSettings.email" />
                </el-form-item>
                <el-form-item label="短信提醒">
                    <el-switch v-model="notificationSettings.sms" />
                </el-form-item>
                <el-form-item label="推送通知">
                    <el-switch v-model="notificationSettings.push" />
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="settings-section" shadow="hover">
            <h3>显示设置</h3>
            <el-form :model="displaySettings" label-width="120px">
                <el-form-item label="主题模式">
                    <el-radio-group v-model="displaySettings.theme">
                        <el-radio label="light">亮色模式</el-radio>
                        <el-radio label="dark">暗色模式</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="语言">
                    <el-select v-model="displaySettings.language" placeholder="选择语言">
                        <el-option label="中文" value="zh" />
                        <el-option label="English" value="en" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>

        <div class="actions">
            <el-button type="primary" @click="handleSaveSettings">保存设置</el-button>
            <el-button @click="resetSettings">重置</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';


const accountSettings = reactive({
    username: 'John Doe',
    email: 'john@example.com',
    password: '',
});


// 通知设置数据
const notificationSettings = reactive({
    email: true,
    sms: false,
    push: true,
});

// 显示设置数据
const displaySettings = reactive({
    theme: 'light',
    language: 'zh',
});

// 保存设置
const handleSaveSettings = () => {
    ElMessage.success('设置已保存');
    // 模拟保存到后端
};

// 重置设置
const resetSettings = () => {
    accountSettings.username = 'John Doe';
    accountSettings.email = 'john@example.com';
    accountSettings.password = '';
    notificationSettings.email = true;
    notificationSettings.sms = false;
    notificationSettings.push = true;
    displaySettings.theme = 'light';
    displaySettings.language = 'zh';
    ElMessage.info('设置已重置');
};
</script>

<style scoped lang="scss">
.settings-page {
    padding: 20px;

    h2 {
        margin-bottom: 20px;
        font-size: 24px;
    }

    .settings-section {
        margin-bottom: 20px;
        padding: 20px;

        h3 {
            margin-bottom: 10px;
            font-size: 18px;
            color: #333;
        }
    }

    .actions {
        text-align: right;
        margin-top: 20px;

        button {
            margin-left: 10px;
        }
    }
}
</style>
